<template>
  <div class="flex flex-col h-full">
    <vxe-card title="" class="w-full" :border="false">
      <AuForm
        ref="formRef"
        :formList="formList"
        :showNumber="3"
        @submit="search"
      />
    </vxe-card>

    <div class="flex-grow overflow-hidden mt-4">
      <AuTable ref="tableRef" v-bind="gridOption" @actionClick="actionClick">
        <template #status_default="{ row }">
          <span>{{
            STATUS_LIST.find(item => item.value === row.status)?.label
          }}</span>
        </template>
      </AuTable>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { AuTable } from "@/components/AuTable";
import { AuForm } from "@/components/AuForm";
import {
  ACTION_TYPE,
  ObjectProps,
  PropDefines
} from "@/components/AuTable/type";
import { FormulaListProp } from "@/api/teaInfuser/formula";
import type { BaseProps, dateProps } from "@/components/AuForm/type";
import {
  deviceSelect,
  materialSelect,
  materialTypeSelect,
  storeGroupSelect
} from "@/utils/formSelect";
import { getMaterialChartsList } from "@/api/cabinet/analysis";

defineOptions({
  name: "MaterialData"
});

// region 声明ref变量集合
const STATUS_LIST = [
  { value: "", label: "全部状态" },
  { value: 1, label: "正常用量" },
  { value: 2, label: "报废用量" },
  { value: 3, label: "补充用量" },
  { value: 4, label: "校准用量" },
  { value: 5, label: "取消用量" },
  { value: 6, label: "异常用量" }
];
const formList = ref<(BaseProps | dateProps | Function)[]>([
  {
    type: "date",
    key: "date",
    label: "日期",
    inType: "daterange",
    startPlaceholder: "起始时间",
    endPlaceholder: "结束时间"
  },
  storeGroupSelect,
  {
    type: "input",
    key: "store_id",
    label: "门店ID",
    placeholder: "请输入门店ID"
  },
  {
    type: "input",
    key: "store_name",
    label: "门店名称",
    placeholder: "请输入门店名称"
  },
  deviceSelect,
  materialTypeSelect,
  materialSelect,
  {
    type: "select",
    key: "status",
    label: "物料用途",
    placeholder: "请选择物料用途",
    valueKey: "value",
    labelKey: "label",
    emptyValues: [null, undefined],
    options: STATUS_LIST,
    defaultValue: ""
  },
  {
    type: "input",
    key: "order_id",
    label: "订单号",
    placeholder: "请输入订单号"
  }
]);
const gridOption = reactive<PropDefines>({
  isServerPage: true,
  columns: [
    { field: "create_time", title: "生产时间", width: 170, align: "center" },
    {
      field: "material_name",
      title: "物料名称",
      minWidth: 120,
      align: "center"
    },
    { field: "use_amount", title: "用量", minWidth: 120, align: "center" },
    {
      field: "status",
      title: "状态",
      width: 100,
      align: "center",
      slots: { default: "status_default" }
    },
    { field: "store_name", title: "门店", minWidth: 200, align: "center" },
    { field: "order_id", title: "订单号", width: 260, align: "center" }
  ],
  actions: [],
  operateTools: [
    // {
    //   icon: "material-symbols:move-item-sharp",
    //   key: "move",
    //   name: "table.telRelocation",
    //   disableHandle: (row: DeviceProp) =>
    //     !(row.device_status == 0 && row.store_id != null)
    // }
  ],
  dataSource: [],
  fetchConfig: {
    query: {
      service: (params: ObjectProps) => {
        return getMaterialChartsList(params);
      },
      param: () => formRef.value.getFormData()
    }
  }
});

const formRef = ref();
const tableRef = ref();
// endregion

// region 公共方法的集合

// endregion

// region 组件事件的集合
const search = () => {
  tableRef.value.refresh();
};

type ActionType = {
  key: ACTION_TYPE;
  row: FormulaListProp;
};
const actionClick = ({ key, row }: ActionType) => {
  console.log(key, row);
};
// endregion
</script>
